<template>
	<view class="box">
		<view class="header">
			<view class="information">
				<view class="upperPart">
					<image :src="info.headPicture || '../../static/img/default_tx.png'"></image>
					<view class="name">
						<view class="personalDetails">
							<text>{{info.realName}}</text>{{info.appellations}}			
						</view>
						<view class="company">{{info.department}}</view>
					</view>
				</view>
				<view class="bottomPart">
					<text v-for="(item,index) in info.labelName">{{item}}</text>
				</view>
			</view>
		</view>
		
		<view class="profile">
			<view class="profileTitle"><text></text>个人简介</view>
			<view class="description" v-html="info.individual"></view>
		</view>
		
		<view class="qualifications">
			<view class="profileTitle"><text></text>个人资质</view>
			<view class="imgList">
				<view class="slideRight" :style="{'width': info.imgList && info.imgList.length*175+'upx'}">
					<image :src="item && item || '../../static/img/default_tx.png'" v-for="(item,index) in info.imgList" :key="index"></image>
				</view>
				
			</view>
		</view>
		
		<view class="atOnce" @click="toIM">
			<image src="@/static/img/healthTeam/smile@2x.png"></image>
			立即咨询
		</view>
	</view>
</template>

<script>
	import {getUrlParam} from '@/static/js/filter.js'
	export default{
		data() {
			return {
				info:{},
				id:''
			}
		},
		onLoad() {
			this.id = getUrlParam('id');
			this.getdata()
		},
		methods:{
			getdata(){
				this.$api.findByHealth({healthId :this.id}).then((res)=>{
					this.info = res.data.result;
					console.log(this.info)
				})
			},
			toIM(){
				 if(this.info.healthRank != 1){
					 uni.showToast({
					  	title:'请联系健康管理师！',
					  	icon:'none'
					 })
					 return;
				 }
				const headPicture = this.info.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/sms/user/2020/11/5de3289f9e284f33a88d35d9b9bf8b8d.png'
				uni.navigateTo({
					url: encodeURI('/pages/imchat/chat?toUserId='+this.info.codeId+'&name='+this.info.realName+'&headPicture='+headPicture)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #F8F8F8;
		width: 750upx;
		min-height: calc(100vh - 44px);
		padding-bottom: 47upx;
		.header {
			width: 750upx;
			height: 454upx;
			background: url(@/static/img/healthTeam/healthDetailsBj@2x.png) no-repeat;
			background-size: 100% 100%;
			padding-top: 27upx;
			box-sizing: border-box;
			overflow: hidden;
			.information {
				width: 702upx;
				height: 310upx;
				background: #F2F5F4;
				border-radius: 12upx;
				margin: 0 auto;	
				padding: 58upx 37upx;
				box-sizing: border-box;
				overflow: hidden;
				.upperPart {
					position: relative;
					display: flex;
					align-content: center;
					image {
						width: 100upx;
						height: 100upx;
						border-radius: 20upx;
					}
					.name {
						width: 400upx;
						margin-left: 46upx;
						.personalDetails,.company {
							color: #5D677B;
							font-size: 28upx;
							text {
								font-size: 36upx;
								color: #0D1422;
								font-weight: bold;
								margin-right: 31upx;
							}
						}
						.company {
							margin-top: 8upx;
						}
					}
				}
				.upperPart::after {
					content: '';
					position: absolute;
					top: -58upx;
					left: -37upx;
					width: 0;
					border: 162upx solid #9d9d9d;
					border-bottom: 162upx solid transparent;
					border-right: 162upx solid transparent;
					border-top-left-radius: 12upx; 
					border-bottom-left-radius: 12upx;
					opacity: .1;
				}
				.upperPart::before {
					content: '';
					position: absolute;
					top: 52upx;
					right: -37upx;
					opacity: .1;
					border: 120upx solid #9d9d9d;
					border-left: 120upx solid transparent;
					border-top: 120upx solid transparent; 
					border-bottom-right-radius: 12upx;
				}
				.bottomPart {
					display: flex;
					flex-wrap: wrap;
					margin-top: 12upx;
					text {
						width: 120upx;
						height: 36upx;
						background: #ABB5C4;
						border-radius: 6upx;
						text-align: center;
						color: #FFFFFF;
						font-size: 26upx;
						margin-right: 40upx;
						margin-top: 20upx;
					}
					text:nth-child(4n) {
						margin-right: 0;
					}
				}
			}
		}
		.profile {
			width: 702upx;
			max-height: 330upx;
			background: #FFFFFF;
			border-radius: 12upx;
			margin: -40px auto 0;
			padding: 10upx 0 20upx;
			.profileTitle {
				height: 80upx;
				display: flex;
				align-items: center;
				text {
					width: 6upx;
					height: 6upx;
					background: #04BFAB;
					border-radius: 50%;
					margin: 0 15upx;
				}
				color: #000000;
				font-size: 30upx;
			}
			.description {
				width: 100%;
				padding: 0 30upx;
				box-sizing: border-box;
				font-size: 28upx;
				color: #666666;
				line-height: 40upx;
				max-height: 230upx;
				overflow-y: auto;
			}
		}
		
		.qualifications {
			margin: 24upx auto 0;
			width: 702upx;
			background: #FFFFFF;
			border-radius: 12upx;
			.profileTitle {
				height: 80upx;
				display: flex;
				align-items: center;
				text {
					width: 6upx;
					height: 6upx;
					background: #04BFAB;
					border-radius: 50%;
					margin: 0 15upx;
				}
				color: #000000;
				font-size: 30upx;
			}
			.imgList {
				width: 702upx;
				overflow-x: auto;
				height: 180upx;
				.slideRight {
					image {
						height: 156upx;
						border-radius: 6upx;
						margin:0 0 40upx 36upx;
						width: 130upx;
					}
				}
				
			}
		}
		
		.atOnce {
			margin: 45upx auto 0;
			width: 476upx;
			height: 90upx;
			background: #04BFAB;
			border-radius: 45upx;
			display: flex;
			align-items: center;
			image {
				width: 36upx;
				height: 36upx;
				margin:0 22upx 0 138upx;
			}
			color: #FFFFFF;
			font-size: 36upx;
		}
	}
</style>
